/*
 * @Description:
 * @Author: skj
 * @Date: 2019-08-15 15:39:23
 * @LastEditors: skj
 * @LastEditTime: 2019-08-26 11:05:18
 */
import React, {Component} from "react";
import {Image, ViewPropTypes, View, ImageBackground} from "react-native";
import {Image as RNEImage} from "react-native-elements";
import PropTypes from "prop-types";
import EStyleSheet from "react-native-extended-stylesheet";

export const ImageType = {
	system: 0, //使用RN自带
	custom: 1 //使用第三方react-native-elements
};
export default class IImage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			source: props.source,
			forceUpdate: false
		};
	}

	layoutPlaceholder = () => {
		if (this.props.placeholderImage) {
			return <Image style={[styles.container, this.props.style]} resizeMode={this.props.placeholderResizeMode} source={this.props.placeholderImage}/>;
		}
		return <View></View>;
	};

	static getDerivedStateFromProps(nextProps, preState) {
		if (preState.forceUpdate) {
			preState.forceUpdate = false;
			return preState;
		}
		return nextProps
	}

	render() {
		const {type, placeholderResizeMode} = this.props;
		let {source} = this.state;
		return type == ImageType.custom ? (
			<RNEImage
				source={typeof source === "string" ? {uri: source} : source}
				style={[styles.container, this.props.style]}
				containerStyle={[styles.container, this.props.style]}
				resizeMode={this.props.resizeMode}
				PlaceholderContent={this.layoutPlaceholder()}
				placeholderStyle={{backgroundColor: '#f2f2f2'}}
				onError={e => {
					console.log(e.nativeEvent.error);
					this.setState({
						source: this.props.errorImage,
						forceUpdate: true
					});
					this.props.onError && this.props.onError(e.nativeEvent.error);
				}}
			/>
		) : this.props.placeholderImage ? (
			<ImageBackground source={this.props.placeholderImage} resizeMode={placeholderResizeMode}
							 style={[styles.container, this.props.style]}>
				{source && <Image
					resizeMode={this.props.resizeMode}
					source={typeof source === "string" ? {uri: source} : source}
					style={[styles.container, this.props.style]}
					onError={e => {
						this.setState({
							source: this.props.errorImage,
							forceUpdate: true
						});
						this.props.onError && this.props.onError(e.nativeEvent.error);
					}}
				/>}
			</ImageBackground>
		) : (
			<ImageBackground
				resizeMode={this.props.resizeMode}
				source={typeof source === "string" ? {uri: this.props.source} : source}
				style={[styles.container, this.props.style]}
			/>
		);
	}
}
IImage.propTypes = {
	type: PropTypes.oneOf([ImageType.system, ImageType.custom]),
	style: ViewPropTypes.style,
	source: PropTypes.any,
	placeholderImage: PropTypes.number,
	placeholderResizeMode: PropTypes.oneOf(['center', 'contain', 'cover', 'repeat', 'stretch']),
	errorImage: PropTypes.number,
	onError: PropTypes.func,
	resizeMode: PropTypes.oneOf(['center', 'contain', 'cover', 'repeat', 'stretch'])
};
IImage.defaultProps = {
	type: ImageType.custom,
	resizeMode: 'contain',
	placeholderResizeMode: 'cover',
	errorImage: require('./image_error.png')
};
const styles = EStyleSheet.create({
	container: {
		width: 200,
		height: 200,
		backgroundColor: "red",
	}
});
